<template>
	<u-popup :show="show" mode="bottom" border-radius="24" height="80%" @close="closePopup">
		<view class="order-popup">
			<!-- 弹窗头部 -->
			<view class="popup-header">
				<view class="back-btn" @click="closePopup">
					<u-icon name="arrow-left" size="24" color="#303133"></u-icon>
				</view>
				<text class="popup-title">提交订单</text>
				<view class="placeholder"></view>
			</view>

			<!-- 商品信息 -->
			<view class="order-item">
				<image :src="orderData.image" mode="aspectFill" class="item-image"></image>
				<view class="item-info">
					<view class="item-name">{{ orderData.title }}</view>
					<view class="item-tags" v-if="orderData.tags && orderData.tags.length > 0">
						<text v-for="(tag, index) in orderData.tags" :key="index" class="item-tag">{{ tag }}</text>
					</view>
					<view class="item-policy">
						<text>随时退 过期自动退 到店</text>
					</view>
					<view class="item-price">¥{{ orderData.currentPrice }}</view>
				</view>
				<view class="quantity-controls">
					<view class="minus-btn" @click="decreaseQuantity" :class="{ disabled: quantity <= 1 }">
						<u-icon name="minus" size="16" color="#909399"></u-icon>
					</view>
					<text class="quantity">{{ quantity }}</text>
					<view class="plus-btn" @click="increaseQuantity">
						<u-icon name="plus" size="16" color="#fa436a"></u-icon>
					</view>
				</view>
			</view>

			<!-- 价格明细 -->
			<view class="price-detail">
				<view class="price-item">
					<text class="price-label">商品总价(共{{ quantity }}件)</text>
					<text class="price-value">¥{{ totalPrice }}</text>
				</view>
			</view>

			<!-- 优惠信息 -->
			<view class="discount-section">
				<view class="discount-item">
					<view class="discount-icon group">团</view>
					<text class="discount-text">团购优惠</text>
					<text class="discount-amount">减¥{{ groupDiscountAmount }}</text>
				</view>
				<view class="discount-item">
					<view class="discount-icon voucher">券</view>
					<text class="discount-text">美团券</text>
					<view class="voucher-select">
						<text class="voucher-tag">神券</text>
						<text class="voucher-amount">减¥{{ voucherDiscount }}</text>
						<u-icon name="arrow-right" size="12" color="#909399"></u-icon>
					</view>
				</view>
			</view>

			<!-- 总价信息 -->
			<view class="total-info">
				<view class="discount-summary">
					<text class="discount-tag">神券 已减{{ voucherDiscount }}元</text>
					<text class="total-saved">共省{{ totalSavedAmount }}元</text>
					<text class="subtotal">小计 ¥{{ finalTotal }}</text>
				</view>
			</view>

			<!-- 底部结算 -->
			<view class="order-footer">
				<view class="payment-left">
					<text class="total-label">合计</text>
					<text class="total-amount">¥{{ finalTotal }}</text>
					<text class="item-count">共{{ quantity }}件</text>
					<text class="saved-amount">总优惠 ¥{{ totalSavedAmount }}</text>
				</view>
				<view class="payment-actions">
					<view class="wechat-pay" @click="handleWechatPay">
						<u-icon name="chat" size="24" color="#09bb07"></u-icon>
						<text>找人付</text>
					</view>
					<view class="submit-btn" @click="submitOrder">
						<text>提交订单</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'OrderConfirmPopup',
	props: {
		// 控制弹窗显示隐藏
		show: {
			type: Boolean,
			default: false
		},
		// 订单商品数据
		orderData: {
			type: Object,
			default: () => ({
				id: '',
				title: '',
				image: '',
				tags: [],
				currentPrice: 0,
				originalPrice: 0
			})
		},
		// 初始数量
		initialQuantity: {
			type: Number,
			default: 1
		},
		// 代金券折扣金额
		voucherDiscount: {
			type: Number,
			default: 4
		}
	},
	data() {
		return {
			quantity: this.initialQuantity
		}
	},
	computed: {
		// 商品总价
		totalPrice() {
			return (this.orderData.currentPrice * this.quantity).toFixed(2);
		},
		// 团购优惠金额
		groupDiscountAmount() {
			return ((this.orderData.originalPrice - this.orderData.currentPrice) * this.quantity).toFixed(2);
		},
		// 最终价格
		finalTotal() {
			const subtotal = this.orderData.currentPrice * this.quantity;
			return Math.max(0, subtotal - this.voucherDiscount).toFixed(0);
		},
		// 总节省金额
		totalSavedAmount() {
			const originalTotal = this.orderData.originalPrice * this.quantity;
			const currentTotal = parseFloat(this.finalTotal);
			return (originalTotal - currentTotal).toFixed(0);
		}
	},
	watch: {
		// 监听初始数量变化
		initialQuantity(newVal) {
			this.quantity = newVal;
		},
		// 监听弹窗显示状态，重置数量
		show(newVal) {
			if (newVal) {
				this.quantity = this.initialQuantity;
			}
		}
	},
	methods: {
		// 关闭弹窗
		closePopup() {
			this.$emit('close');
		},
		// 增加数量
		increaseQuantity() {
			this.quantity++;
			this.$emit('quantity-change', this.quantity);
			uni.vibrateShort();
		},
		// 减少数量
		decreaseQuantity() {
			if (this.quantity > 1) {
				this.quantity--;
				this.$emit('quantity-change', this.quantity);
				uni.vibrateShort();
			}
		},
		// 微信支付
		handleWechatPay() {
			this.$emit('wechat-pay', {
				orderData: this.orderData,
				quantity: this.quantity,
				totalAmount: this.finalTotal
			});
		},
		// 提交订单
		submitOrder() {
			this.$emit('submit-order', {
				orderData: this.orderData,
				quantity: this.quantity,
				totalAmount: this.finalTotal,
				originalAmount: this.totalPrice,
				savedAmount: this.totalSavedAmount
			});
		}
	}
}
</script>

<style lang="scss" scoped>
/* 订单确认弹窗 */
.order-popup {
	background: #f8f9fa;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.popup-header {
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20upx 30upx;
	border-bottom: 1px solid #f0f0f0;

	.back-btn {
		width: 60upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-title {
		font-size: 32upx;
		font-weight: 600;
		color: #303133;
	}

	.placeholder {
		width: 60upx;
	}
}

.order-item {
	background: #fff;
	padding: 24upx 30upx;
	margin-bottom: 20upx;
	display: flex;
	align-items: flex-start;

	.item-image {
		width: 120upx;
		height: 120upx;
		border-radius: 12upx;
		margin-right: 20upx;
	}

	.item-info {
		flex: 1;

		.item-name {
			font-size: 28upx;
			font-weight: 600;
			color: #303133;
			margin-bottom: 12upx;
			line-height: 1.4;
		}

		.item-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 8upx;
			margin-bottom: 12upx;

			.item-tag {
				background: #f0f9ff;
				color: #1890ff;
				font-size: 20upx;
				padding: 4upx 8upx;
				border-radius: 4upx;
			}
		}

		.item-policy {
			font-size: 24upx;
			color: #909399;
			margin-bottom: 12upx;
		}

		.item-price {
			font-size: 32upx;
			font-weight: 700;
			color: #fa436a;
		}
	}

	.quantity-controls {
		display: flex;
		align-items: center;
		border: 1px solid #e0e0e0;
		border-radius: 20upx;
		overflow: hidden;

		.minus-btn,
		.plus-btn {
			width: 60upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f9fa;
			transition: all 0.3s ease;

			&.disabled {
				opacity: 0.3;
			}

			&:active {
				background: #e9ecef;
			}
		}

		.quantity {
			min-width: 60upx;
			text-align: center;
			font-size: 28upx;
			font-weight: 600;
			background: #fff;
			height: 60upx;
			line-height: 60upx;
		}
	}
}

.price-detail {
	background: #fff;
	padding: 20upx 30upx;
	margin-bottom: 20upx;

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.price-label {
			font-size: 28upx;
			color: #303133;
		}

		.price-value {
			font-size: 28upx;
			font-weight: 600;
			color: #303133;
		}
	}
}

.discount-section {
	background: #fff;
	padding: 0 30upx;
	margin-bottom: 20upx;

	.discount-item {
		display: flex;
		align-items: center;
		padding: 20upx 0;
		border-bottom: 1px solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		.discount-icon {
			width: 40upx;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8upx;
			font-size: 24upx;
			font-weight: 600;
			color: #fff;
			margin-right: 16upx;

			&.group {
				background: #fa436a;
			}

			&.voucher {
				background: #52c41a;
			}
		}

		.discount-text {
			font-size: 28upx;
			color: #303133;
			margin-right: auto;
		}

		.discount-amount {
			font-size: 28upx;
			color: #fa436a;
			font-weight: 600;
		}

		.voucher-select {
			display: flex;
			align-items: center;
			gap: 8upx;

			.voucher-tag {
				background: linear-gradient(135deg, #fa436a, #ff6b7a);
				color: #fff;
				font-size: 20upx;
				padding: 4upx 8upx;
				border-radius: 6upx;
				font-weight: 600;
			}

			.voucher-amount {
				font-size: 24upx;
				color: #fa436a;
				font-weight: 600;
			}
		}
	}
}

.total-info {
	background: #fff;
	padding: 20upx 30upx;
	margin-bottom: 20upx;

	.discount-summary {
		display: flex;
		align-items: center;
		gap: 16upx;

		.discount-tag {
			background: linear-gradient(135deg, #fa436a, #ff6b7a);
			color: #fff;
			font-size: 22upx;
			padding: 6upx 12upx;
			border-radius: 12upx;
			font-weight: 600;
		}

		.total-saved {
			font-size: 24upx;
			color: #fa436a;
			font-weight: 600;
		}

		.subtotal {
			font-size: 32upx;
			color: #fa436a;
			font-weight: 700;
			margin-left: auto;
		}
	}
}

.order-footer {
	background: #fff;
	padding: 24upx 30upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f0f0f0;
	margin-top: auto;

	.payment-left {
		.total-label {
			font-size: 24upx;
			color: #909399;
			margin-right: 8upx;
		}

		.total-amount {
			font-size: 36upx;
			font-weight: 700;
			color: #fa436a;
			margin-right: 16upx;
		}

		.item-count {
			font-size: 24upx;
			color: #909399;
			margin-right: 12upx;
		}

		.saved-amount {
			font-size: 24upx;
			color: #52c41a;
		}
	}

	.payment-actions {
		display: flex;
		align-items: center;
		gap: 20upx;

		.wechat-pay {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4upx;
			cursor: pointer;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			text {
				font-size: 20upx;
				color: #09bb07;
			}
		}

		.submit-btn {
			background: linear-gradient(135deg, #fa436a, #ff6b7a);
			color: #fff;
			padding: 20upx 40upx;
			border-radius: 24upx;
			font-size: 28upx;
			font-weight: 600;
			box-shadow: 0 4upx 12upx rgba(250, 67, 106, 0.4);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(1upx);
				box-shadow: 0 2upx 8upx rgba(250, 67, 106, 0.4);
			}
		}
	}
}
</style> 